<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Toggle Bulb</title>
    <style>
       body{
           background: #f2f2f2;
           font-family: 'Open Sans', sans-serif;
          }
      .search {
           width: 100%;
           position: relative;
           display: flex;
         }
      .searchTerm {
           width: 100%;
           border: 3px solid #00B4CC;
           border-right: none;
           padding: 5px;
           height: 20px;
           border-radius: 5px 0 0 5px;
           outline: none;
           color: #9DBFAF;
          }
      .searchTerm:focus{
           color: #00B4CC;
          }
      .searchButton {
           width: 40px;
           height: 36px;
           border: 1px solid #00B4CC;
           background: #00B4CC;
           text-align: center;
           color: #fff;
           border-radius: 0 5px 5px 0;
           cursor: pointer;
           font-size: 20px;
          }
          /*调整大小查看搜索栏的变化*/
      .wrap{
           width: 30%;
           position: absolute;
           top: 10%;
           right: 0;
           transform: translate(0, 0);
            }
        /* 设置分页链接的样式 */
        ul.pagination li a { border-radius: 5px;}
        /* 设置活动状态下分页链接的样式 */
        ul.pagination li a.active { border-radius: 5px;}
        /* 设置分页容器的样式 */
        ul.pagination {
            display: inline-block;
            padding: 0;
            margin: 0;
        }
        /* 设置分页项的样式 */
        ul.pagination li { display: inline;}
        /* 设置分页链接的样式 */
        ul.pagination li a {
            color: black;
            float: left;
            padding: 8px 16px;
            text-decoration: none;
        }
        /* 设置活动状态下分页链接的样式 */
        ul.pagination li a.active {
            background-color: green;
            color: white;
        }
        /* 设置鼠标悬停时分页链接的样式 */
        ul.pagination li a:hover:not(.active) { background-color: #ddd;}
        /* 设置分页链接背景颜色变化的过渡效果 */
        ul.pagination li a { transition: background-color .3s;}
        /* 设置分页边框样式 */
        ul.pagination li a { border: 2px solid black;}
        /* 设置分页容器中第一个和最后一个链接的圆角样式 */
        .pagination li:first-child a { border-top-left-radius: 5px; border-bottom-left-radius: 5px;}
        .pagination li:last-child a { border-top-right-radius: 5px; border-bottom-right-radius: 5px;}
        /* 设置分页间距 */
        ul.pagination li a { margin: 0 4px;} /* 0 对应的是头部与底部 */
        /* 设置分页字体大小 */
        ul.pagination li a { font-size: 22px;} /* 修改字体大小 */
        /* 设置中心对齐样式 */
        div.center { text-align: center;} /* 居中 */
    </style>
    <script>
        // 定义图片URL常量
        const BULB_IMAGE_URL_1 = "https://www.taghobby.com/wp-content/uploads/2015/12/ca004.jpg";
        const BULB_IMAGE_URL_2 = "https://img2.baidu.com/it/u=2885221497,3273622046&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=918";/*切换图片* 当点击图片时，根据当前图片URL切换到另一张图片*/
        function toggleBulb() {
            var bulbImage = document.getElementById('bulb');
             if (bulbImage.src.includes(BULB_IMAGE_URL_1)) {
                bulbImage.src = BULB_IMAGE_URL_2;
            } else {
                bulbImage.src = BULB_IMAGE_URL_1;
            }
        }
        function fnbutton(){
            alert("天才在左，疯子在右，我在中间，我是天子")
        }
    </script>
    <input type="button"onclick="fnbutton()"value="上朝">
</head>
<body>
    <div class="wrap">
        <form action="https://www.baidu.com/" method="get"> 
        <div class="search">
       <input type="text" class="searchTerm" placeholder="搜索" name="q"> 
           <button type="submit" class="searchButton">
             <img src="https://t8.baidu.com/it/u=977494177,4042536667&fm=193" alt="search icon"style="width:20px;height:20px;"></i>
          </button>
        </div>
        </form> 
     </div> 
    <h2>点击及鼠标悬停分页样式</h2>
    <p>移动鼠标的分页的数字上。</p>
    <!-- 分页导航 -->
    <ul class="pagination">
        <li><a href="#">«</a></li>
        <li><a class="active" href="#">1</a></li>
        <li><a class="active" href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
        <li><a href="#">6</a></li>
        <li><a href="#">7</a></li>
        <li><a href="#">»</a></li>
    </ul>

    <!-- 灯泡图片，点击时切换图片 -->
    <img id="bulb" src="https://www.taghobby.com/wp-content/uploads/2015/12/ca004.jpg" onclick="toggleBulb()" alt="Bulb"> <!-- 统一为基准图片链接 -->
</body>
</html>